<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>订单列表</title>
		 <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
	</head>
	<body style="padding: 10px; ">
		<div class="search">
			<button type="button" class="layui-btn" id="search"><i class="layui-icon">&#xe615;</i> 查找订单</button>
			<span style="margin-left: 10px;">订单号</span>
			<input type="text" placeholder="请输入商品名称" style="width: 120px;height: 30px;"id="goods_name"/>
			<span style="margin-left: 10px;">下单时间</span>
			<input type="text" id="goods_time" style="width: 180px; height: 30px;" placeholder="请选择一个时间范围"/>
		</div>
		 
		<table class="layui-hide" id="test" lay-filter="test"></table>
		 
		<script type="text/html" id="orderState">
			<div>
				{{d.state[0]?"<span>已确认</span>":"<span style='color:red;'>已退货</span>"}}
				{{d.state[1]?"<span>已付款</span>":"<span style='color:red;'>未付款</span>"}}
				{{d.state[2]?"<span>已发货</span>":"<span style='color:red;'>未发货</span>"}}
				
			</div>
		</script>
		<script type="text/javascript" src="layui/layui.js"></script>
		<script>
			layui.use(['laydate','table','laytpl','upload','form'], function(){
			  var laydate = layui.laydate;
			  var table = layui.table;
			  var laytpl=layui.laytpl;
			  var $ = layui.$;
			  var upload = layui.upload;
			  var form=layui.form;
				//日期选择
			  laydate.render({
			    elem: '#goods_time'//指定元素
				 ,range: true
			  });
			    var data=[
					{
						"number":"000001",
						"name":"商品1",
						"time":"2021-1-29",
						"take":"张三 吉林省",
						"price":"100",
						"state":[1,1,1]
					},
					{
						"number":"000002",
						"name":"商品2",
						"time":"2021-1-29",
						"take":"李四 吉林省",
						"price":"105",
						"state":[1,1,0]	
					},
					{
						"number":"000003",
						"name":"商品3",
						"time":"2021-1-29",
						"take":"张三 吉林省",
						"price":"199",
						"state":[1,1,1]	
					},
					{
						"number":"000004",
						"name":"商品4",
						"time":"2021-1-29",
						"take":"张三 吉林省",
						"price":"90",
						"state":[1,1,1]
					},
					{
						"number":"000005",
						"name":"商品5",
						"time":"2021-1-29",
						"take":"张三 吉林省",
						"price":"60",
						"state":[0,0,0]	
					}
				]
				// 查找商品获取数据
				var newData=JSON.parse(JSON.stringify(data));//stringify方法序列化
				//JSON.parse(JSON.stringify(data))实现对象的深拷贝
				renderTable(newData);
				$("#search").on("click",function(){
					var goodsname=$("#goods_name").val().trim();//trim方法去掉前后空格
					var goodstime=$("#goods_time").val().trim();
					if(goodsname){//进行筛选
						newData=newData.filter((item,index)=>{
							return item.number==goodsname;
						})
					}
					if(goodstime){
						var arr=goodstime.split(" ");
						var lowtime=new Date(arr[0]);
						var hightime=new Date(arr[2]);
						newData=newData.filter((item,index)=>{
							return new Date(item.time)>=lowtime&&new Date(item.time)<=hightime;
						})
					}
					renderTable(newData);
				})
				//表格渲染
				function renderTable(data){
					table.render({
					    elem: '#test'
					    // ,url:'/test/table/demo1.json'  //数据接口
						,data:data  //直接赋值
					    ,title: '商品列表'
					    ,cols: [[
					       // {type: 'checkbox', fixed: 'left'}
					      {field:'number', title:'订单号',  fixed: 'left', unresize: true, sort: true}
					      ,{field:'name', title:'商品名称', edit: 'text'}
					      ,{field:'time', title:'下单时间',  edit: 'text', sort: true}
						  ,{field:'take', title:'收货人',  edit: 'text'}
					      ,{field:'price', title:'订单价格',edit: 'text',sort:true,width:100}
					      ,{field: 'state', title:'订单状态', toolbar: '#orderState',width:150}
					    ]]
					    ,page: true
					  });
					  
					  //监听行工具事件
					  table.on('tool(test)', function(obj){
					    var data = obj.data;
					    //console.log(obj)
					    if(obj.event === 'del'){
					      layer.confirm('是否删除该商品',{
						   icon:2
						   },function(index){//这里需要一个接口告诉后台数据的变化（用ajax可实现）
							 obj.del();
							 layer.close(index);
					   });
					    } else if(obj.event === 'edit'){
						   laytpl($("#demo").html()).render(data,function(html){
							   $("#view").html(html);
						   })
						   
						   //上传图片
						   var uploadInst = upload.render({
							  elem: '#test1'
							  ,url: 'https://httpbin.org/post' //改成您自己的上传接口
							  ,before: function(obj){
								//预读本地文件示例，不支持ie8
								obj.preview(function(index, file, result){
								  $('#demo1').attr('src', result); //图片链接（base64）
								});
							  }
							  ,done: function(res){
								//如果上传失败
								if(res.code > 0){
								  return layer.msg('上传失败');
								}
								//上传成功
							  }
							  ,error: function(){
								//演示失败状态，并实现重传
								var demoText = $('#demoText');
								demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
								demoText.find('.demo-reload').on('click', function(){
								  uploadInst.upload();
								});
							  }
							});
							//监听表单提交按钮
							  form.on('submit(formDemo)', function(data){
								layer.msg(JSON.stringify(data.field));//可提交给后台服务器，也需要一个接口				//		
								return false;
							  });
							  
						   layer.open({
							   type:1,//弹窗类型
							   title:"编辑商品",
							   anim:5,//动画设置
							   shadeClose:true,//开启点击阴影关闭
							   area:['40%','80%'],//窗口大小
							   title:'编辑商品',
							   content:$("#view")//窗口内容，可以使用模板
						   });
					    }
					  });
				}
			});
		</script>
	</body>
</html>


